<!-- 
  三个重点
  1. 基于逻辑函数的封装
     1. 按照业务模块抽离了俩个函数
     2. 组件的setup中把模板中要用到的数据从函数执行结果中解构赋值出来
     思想：组合式的思想 setup中不用写很多业务代码 而仅仅是组合业务代码

  2. 如何在setup中使用路由参数
      1. 使用参数  
         useRoute() -> route === this.$route
         route.params.id
         route.query.id

      2. 调用方法
         useRouter() -> router === this.$router
         router.push()
         router.replace()
         router.go(-1)
      
      useStore  useRouter useRoute

  3. 基于插件化指令的图片懒加载封装
     1. 插件
        const plugin  = {
           install(app){
            // 定义插件的核心逻辑
            // app能力范围内能够做到的事儿都可以以插件的方式完成
            // app.directive()
            // app.component()
            // app.provide()? provide/inject
            // .....
         }
        }
        // 调用use方法相当于执行了插件的install方法 并且把实参app传入进去
        createApp(app).use(plugin)
     2. 指令
        app.directive('指令名称',{
           // 指令挂载的元素首次完成渲染之后立刻执行
           // 只会执行一次
           mounted(el, binding){
            // el: 指令挂载到谁身上就指的那个dom元素
            // bingding.value 指令等于号后面表达式的值
           }
        })

     3. 插件化的图片懒加载指令
        const plugin = {
           install(app){
             // 指令的定义
             app.directive('img-lazy',{
                mounted(el,binding){
                  // 编写图片懒加载逻辑
                  // 思想：图片进入到时候区域 才正式发送网络请求 请求图片资源
                  // 1. 如何监控进入视口 2. 如何发送请求
                  // vueUse  img.src = 'url'
                  // todo 核心逻辑
                }
             })
           }
        }
        createApp().use(plugin)

  作业
  1. 实现品牌模块 
     数据渲染 + 图片懒加载优化图片获取

  2. 自己总结俩天的课程
 -->